<template>
  <div class="certification">
    <!-- 公司资质认证 -->
    <el-dialog title="认证公司" :visible.sync="isShowDialog" :modal="false" :close-on-click-modal="false" width="760px" class="thisblack-bgc">
      <!-- 未上传资质认证 -->
      <div v-if="ruleForm.verifiedstate == 2" class="certification-group">
        <p class="group-tip">为保障买家权益，请完善营业执照及相关信息，工作人员会在1个工作日内审核。</p>
        <p class="group-tip">审核通过后，享有发布产品、专属展位等权限。</p>
        <div class="group-upload">
          <div v-if="ruleForm.filename" class="upload-img">
            <img :src="`https://img1.17img.cn/17img/${ruleForm.filename}`" alt="">
            <i class="el-icon-error" @click="delectImg" />
          </div>
          <div class="upload-box">
            <el-upload
              ref="uploadPic"
              action="/api/b2b/common-api/file/upload/imageNoMark"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <el-button>{{ ruleForm.filename ? '重新上传执照' : '上传执照' }}</el-button>
            </el-upload>
            <p class="box-tip">为保证精准识别，请上传5M以内的高清jpg/jpeg/png格式的营业执照副本</p>
            <p class="box-tip">如需帮助，可拨打电话：4006-315-817</p>
          </div>
        </div>
      </div>
      <!-- 资质过期认证 -->
      <div v-if="ruleForm.verifiedstate == 3" class="certification-group">
        <p class="group-h1">您上传的营业执照已到期，请尽快更新上传有效的营业执照，方可正常使用平台</p>
        <p class="group-tip">根据相关法律法规要求，请更新上传有效的营业执照及相关信息，工作人员会在1个工作日内审核。</p>
        <p class="group-tip">审核通过后，即可正常使用会员管理后台，享有发布产品、专属展位等权限。</p>
        <div class="group-upload">
          <div v-if="ruleForm.filename" class="upload-img">
            <img :src="`https://img1.17img.cn/17img/${ruleForm.filename}`" alt="">
            <i class="el-icon-error" @click="delectImg" />
          </div>
          <div class="upload-box">
            <el-upload
              ref="uploadPic"
              action="/api/b2b/common-api/file/upload/imageNoMark"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <el-button>{{ ruleForm.filename ? '重新上传执照' : '上传执照' }}</el-button>
            </el-upload>
            <p class="box-tip">为保证精准识别，请上传5M以内的高清jpg/jpeg/png格式的营业执照副本</p>
            <p class="box-tip">如需帮助，可拨打电话：4006-315-817</p>
          </div>
        </div>
      </div>
      <!-- 资质正常、待审核 -->
      <div v-if="ruleForm.verifiedstate == 0 || ruleForm.verifiedstate == 1" class="certification-group">
        <p class="group-tip">为保障买家权益，请完善营业执照及相关信息，工作人员会在1个工作日内审核。</p>
        <p class="group-tip">审核通过后，享有发布产品、专属展位等权限。</p>
        <p class="group-tip">营业执照处于待审核状态发布的产品及内容将暂时无法在展位内展示，审核通过后方可在站位内查看发布的内容。</p>
        <div class="group-upload">
          <div v-if="ruleForm.filename" class="upload-img">
            <img v-if="ruleForm.filename" :src="`https://img1.17img.cn/17img/${ruleForm.filename}`" alt="">
            <i class="el-icon-error" @click="delectImg" />
          </div>
          <div class="upload-box">
            <el-upload
              ref="uploadPic"
              action="/api/b2b/common-api/file/upload/imageNoMark"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <el-button>{{ ruleForm.filename ? '重新上传执照' : '上传执照' }}</el-button>
            </el-upload>
            <p class="box-tip">为保证精准识别，请上传5M以内的高清jpg/jpeg/png格式的营业执照副本</p>
            <p class="box-tip">如需帮助，可拨打电话：4006-315-817</p>
          </div>
        </div>
      </div>
      <!-- 资质过未通过审核认证 -->
      <div v-if="ruleForm.verifiedstate == -1" class="certification-group">
        <p class="group-h1">您的营业执照上传审核未通过，请重新上传，方可正常使用平台</p>
        <p class="group-tip error" />
        <p class="group-tip">为保障买家权益，请完善营业执照及相关信息，工作人员会在1个工作日内审核。</p>
        <p class="group-tip">审核通过后，享有发布产品、专属展位等权限。</p>
        <p class="group-tip">营业执照处于待审核状态发布的产品及内容将暂时无法在展位内展示，审核通过后方可在站位内查看发布的内容。</p>
        <div class="group-upload">
          <div v-if="ruleForm.filename" class="upload-img">
            <img :src="`https://img1.17img.cn/17img/${ruleForm.filename}`" alt="">
            <i class="el-icon-error" @click="delectImg" />
          </div>
          <div class="upload-box">
            <el-upload
              ref="uploadPic"
              action="/api/b2b/common-api/file/upload/imageNoMark"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <el-button>{{ ruleForm.filename ? '重新上传执照' : '上传执照' }}</el-button>
            </el-upload>
            <p class="box-tip">为保证精准识别，请上传5M以内的高清jpg/jpeg/png格式的营业执照副本</p>
            <p class="box-tip">如需帮助，可拨打电话：4006-315-817</p>
          </div>
        </div>
      </div>
      <div v-if="!isHaveInfo" v-loading="loading" class="p16" />
      <div v-if="isHaveInfo" class="upload-info">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="75px" class="info-ruleForm">
          <div class="flex">
            <el-form-item label="展位名称" prop="imcom" :class="ruleForm.verifiedstate == 2 ? 'boothNamePosition2' : ruleForm.verifiedstate == 3 ? 'boothNamePosition3' : ruleForm.verifiedstate == -1 ? 'boothNamePosition' : 'boothNamePosition1'">
              <el-input v-model="ruleForm.imcom" type="text" class="w500" show-word-limit maxlength="30" placeholder="请输入展位名称" :disabled="ruleForm.verifiedstate != 2 && ruleForm.verifiedstate != -1" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="展位简称" prop="imcomAbb" :class="ruleForm.verifiedstate == 2 ? 'boothNameAddPosition2' : ruleForm.verifiedstate == 3 ? 'boothNameAddPosition3' : ruleForm.verifiedstate == -1 ? 'boothNameAddPosition' : 'boothNameAddPosition1'">
              <el-input v-model="ruleForm.imcomAbb" type="text" class="w500" show-word-limit maxlength="30" placeholder="请输入展位简称" :disabled="ruleForm.verifiedstate != 2 && ruleForm.verifiedstate != -1" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="企业名称" prop="title">
              <el-input v-model="ruleForm.title" type="text" class="w270" placeholder="请输入企业名称" />
            </el-form-item>
            <el-form-item label="企业类型" prop="newregisteredtype">
              <el-input v-model="ruleForm.newregisteredtype" type="text" class="w270" placeholder="请输入企业类型" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="信用代码" prop="registeredno">
              <el-input v-model="ruleForm.registeredno" type="text" class="w270" placeholder="请输入信用代码" />
            </el-form-item>
            <el-form-item label="法人代表" prop="registeredman">
              <el-input v-model="ruleForm.registeredman" type="text" class="w270" placeholder="请输入法人代表" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="注册地址" prop="regplace">
              <el-input v-model="ruleForm.regplace" class="w270" placeholder="请输入注册地址" />
            </el-form-item>
            <el-form-item label="成立日期" prop="registrationdate">
              <el-date-picker
                v-model="ruleForm.registrationdate"
                class="w270"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请输入成立日期"
              />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="注册资本" prop="regmoney">
              <el-input v-model="ruleForm.regmoney" class="w270" placeholder="请输入注册资本" />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="有效期" prop="annualsurveytime">
              <el-date-picker
                v-model="ruleForm.annualsurveytime"
                class="w170"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                @change="getAnnualsurveytime"
              />
              <span style="margin-left: 20px">至</span>
            </el-form-item>
            <el-form-item prop="validdate" class="item-validdate">
              <el-date-picker
                v-model="ruleForm.validdate"
                class="w170"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择截止日期"
                @change="getValiddate"
              />
              <el-radio v-model="longTerm" class="ml16" label="1" @change="addLongTerm">长期有效</el-radio>
            </el-form-item>
          </div>
          <el-form-item label="经营范围" prop="managerange">
            <el-input v-model="ruleForm.managerange" type="textarea" style="width: 636px" :rows="5" placeholder="请输入经营范围" />
          </el-form-item>
          <el-form-item label="企业性质" prop="registeredtype">
            <div class="content">
              <ul class="checkbox-ul">
                <el-radio-group v-model="ruleForm.registeredtype">
                  <el-radio v-for="item in registeredType" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                  <svg-icon class="item-svg" icon-class="selected" />
                </el-radio-group>
              </ul>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import { getImListId } from '@/utils/auth'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    company: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      isHaveInfo: false,
      longTerm: '',
      loading: false,
      picName: '',
      registeredType: [
        { label: '国有', value: 1 },
        { label: '外资', value: 2 },
        { label: '民营', value: 3 },
        { label: '其他', value: 4 }
      ],
      ruleForm: {
        imcom: '', // 展位名称
        imcomAbb: '', // 展位简称
        title: '', // 证书名称
        registeredno: '', // 信用代码
        registeredman: '', // 法人代表
        regplace: '', // 注册地址
        registrationdate: '', // 成立日期
        regmoney: '', // 注册资本
        managerange: '', // 经营范围
        annualsurveytime: '', // 证书开始有效期
        validdate: '', // 证书截止有效期
        filename: '',
        registeredtype: '' // 企业性质
      },
      rules: {
        imcom: [{ required: true, message: '请填写展位名称', trigger: 'blur' }],
        // imcomAbb: [{ required: true, message: '请填写展位简称', trigger: 'blur' }],
        title: [{ required: true, message: '请填写证书名称', trigger: 'blur' }],
        newregisteredtype: [{ required: true, message: '请填写企业类型', trigger: 'blur' }],
        registeredno: [{ required: true, message: '请填写信用代码', trigger: 'blur' }],
        registeredman: [{ required: true, message: '请填写法人代表', trigger: 'blur' }],
        regplace: [{ required: true, message: '请填写注册地址', trigger: 'blur' }],
        registrationdate: [{ required: true, message: '请填写成立日期', trigger: 'change' }],
        regmoney: [{ required: true, message: '请填写注册资本', trigger: 'blur' }],
        annualsurveytime: [{ required: true, message: '请填写证书有效期开始时间', trigger: 'change' }],
        validdate: [{ required: true, message: '请填写证书有效期截止时间', trigger: 'change' }],
        managerange: [{ required: true, message: '请填写经营范围', trigger: 'blur' }],
        registeredtype: [{ required: true, message: '请选择企业性质', trigger: 'blur' }]
      }
    }
  },
  computed: {
    isShowDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('closeEvents', 'isQualifications', val)
      }
    }
  },
  mounted () {
  },
  created () {
    this.ruleForm = JSON.parse(JSON.stringify(this.company))
    this.getCompanyListByUser() // 获取展位名称和简称
    this.ruleForm.filename = this.ruleForm.sourcefile
    this.picName = this.ruleForm.sourcefile
    this.isHaveInfo = true
  },
  methods: {
    async getCompanyListByUser () {
      const params = {
        imListId: getImListId()
      }
      const { data } = await api.imlist.companyInfo(params)
      this.$set(this.ruleForm, 'imcom', data.imCom)
      this.$set(this.ruleForm, 'imcomAbb', data.imComAbb)
    },
    closeDialog () {
      this.$emit('closeEvents', 'isQualifications', false)
    },
    async getOCRInfo (imgUrl) {
      const params = { imgUrl }
      this.loading = true
      this.isHaveInfo = false
      try {
        const { data, code } = await api.common.getOcr(params)
        this.isHaveInfo = true
        this.loading = false
        if (code === 200) {
          this.$set(this.ruleForm, 'title', data.title)
          this.$set(this.ruleForm, 'newregisteredtype', data.newregisteredtype)
          this.$set(this.ruleForm, 'registeredno', data.registeredno)
          this.$set(this.ruleForm, 'registeredman', data.registeredman)
          this.$set(this.ruleForm, 'regplace', data.regplace)
          this.$set(this.ruleForm, 'registrationdate', data.registrationdate)
          this.$set(this.ruleForm, 'regmoney', data.regmoney)
          this.$set(this.ruleForm, 'managerange', data.managerange)
          this.$set(this.ruleForm, 'annualsurveytime', data.annualsurveytime)
          this.$set(this.ruleForm, 'validdate', data.validdate)

          // 判断证书有效期是否是100年--》长期有效
          const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
          const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
          const startDay = this.ruleForm.annualsurveytime.split('-')[2]
          const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
          if (newTime === this.ruleForm.validdate) {
            this.longTerm = '1'
          } else {
            this.longTerm = ''
          }
        }
      } catch (error) {
        // Object.assign(this.$data.ruleForm, this.$options.data().ruleForm)
        // this.ruleForm = this.$options.data().ruleForm
        // this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        // 以上方法初始化都不好使，待研究
        this.ruleForm.title = '' // 证书名称
        this.ruleForm.registeredno = '' // 信用代码
        this.ruleForm.registeredman = '' // 法人代表
        this.ruleForm.regplace = '' // 注册地址
        this.ruleForm.registrationdate = '' // 成立日期
        this.ruleForm.regmoney = '' // 注册资本
        this.ruleForm.managerange = '' // 经营范围
        this.ruleForm.annualsurveytime = '' // 证书开始有效期
        this.ruleForm.validdate = '' // 证书截止有效期
        this.isHaveInfo = true
        this.loading = false
      }
    },
    handlePicSuccess (res) {
      this.picName = res.data
      this.ruleForm.filename = res.data
      this.getOCRInfo(`https://img1.17img.cn/17img/${this.picName}`)
    },
    beforePicUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 20MB!')
      }
      return isJPG && isLt5M
    },
    delectImg () {
      this.picName = ''
      this.ruleForm.filename = ''
    },
    addLongTerm () {
      if (this.ruleForm.annualsurveytime) {
        const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
        const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
        const startDay = this.ruleForm.annualsurveytime.split('-')[2]
        this.ruleForm.validdate = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        this.longTerm = '1'
      } else {
        this.$message.error('请选择有效期的开始时间')
        this.longTerm = ''
      }
    },
    submitForm (formName) {
      if (this.isHaveInfo && this.picName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            await api.imlist.updateBusinessQualification(this.ruleForm)
            this.$message({ type: 'success', message: '设置成功!' })
            this.$emit('closeEvents', 'isQualifications', false)
          } else {
            return false
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '请上传执照!'
        })
      }
    },
    getValiddate (data) {
      if (this.ruleForm.annualsurveytime && data) {
        const startYaer = this.ruleForm.annualsurveytime.split('-')[0]
        const startMonth = this.ruleForm.annualsurveytime.split('-')[1]
        const startDay = this.ruleForm.annualsurveytime.split('-')[2]
        const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        if (data === newTime) {
          this.longTerm = '1'
        } else {
          this.longTerm = ''
        }
      } else {
        this.longTerm = ''
      }
    },
    getAnnualsurveytime (data) {
      if (this.ruleForm.validdate && data) {
        const startYaer = data.split('-')[0]
        const startMonth = data.split('-')[1]
        const startDay = data.split('-')[2]
        const newTime = `${parseInt(startYaer) + 100}-${startMonth}-${startDay}`
        if (this.ruleForm.validdate === newTime) {
          this.longTerm = '1'
        } else {
          this.longTerm = ''
        }
      } else {
        this.longTerm = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .w500 {
    width: 500px;
  }
  .certification {
    width: 100%;
    position: relative;
    .thisblack-bgc {
      background: rgba(0,0,0,.5);
    }
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding-bottom: 20px;
        border-bottom: 1px solid #E5EAF0;
        .el-dialog__title {
          font-size: 16px;
          font-weight: 500;
          color: #202933;
        }
      }
      .el-dialog__footer {
        border-top: 1px solid #E5EAF0;
        padding: 25px;
        text-align: center;
      }
      .el-dialog__body {
        padding: 25px;
        position: relative;
        .certification-group {
          .group-h1 {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1;
          }
          .group-tip {
            font-size: 14px;
            color: #7E8790;
            line-height: 1.8;
          }
          .group-upload {
            width: 100%;
            min-height: 100px;
            background: #F5F8FC;
            padding: 15px 25px;
            box-sizing: border-box;
            margin: 168px auto 0;
            .upload-img {
              width: 100px;
              height: 75px;
              display: inline-block;
              vertical-align: middle;
              margin-right: 33px;
              position: relative;
              img {
                width: 100%;
                max-height: 100%;
              }
              .el-icon-error {
                position: absolute;
                top: -10px;
                right: -10px;
                font-size: 20px;
                z-index: 9;
                cursor: pointer;
              }
            }
            .upload-box {
              display: inline-block;
              vertical-align: middle;
              .box-tip {
                font-size: 12px;
                color: #7E8790;
                margin: 15px auto;
                text-align: left;
              }
              .el-upload-list {
                display: none;
              }
            }
          }
        }
        .upload-info {
          margin: 30px auto 20px;
          .el-form-item {
            margin-right: 20px;
            &.boothNamePosition1 {
              position: absolute;
              top: 125px;
              z-index: 99;
            }
            &.boothNamePosition2 {
              position: absolute;
              top: 100px;
              z-index: 99;
            }
            &.boothNamePosition3 {
              position: absolute;
              top: 130px;
              z-index: 99;
            }
            &.boothNamePosition {
              position: absolute;
              top: 160px;
              z-index: 99;
            }
            &.boothNameAddPosition1 {
              position: absolute;
              top: 190px;
              z-index: 99;
            }
            &.boothNameAddPosition2 {
              position: absolute;
              top: 160px;
              z-index: 99;
            }
            &.boothNameAddPosition3 {
              position: absolute;
              top: 190px;
              z-index: 99;
            }
            &.boothNameAddPosition {
              position: absolute;
              top: 220px;
              z-index: 99;
            }
            &.item-validdate {
              .el-form-item__content {
                margin-left: 0!important;
                .el-radio{
                  &.is-checked {
                    .el-radio__label {
                      color: #0c7ff2;
                    }
                  }
                  .el-radio__label {
                    color: #7E8790;
                  }
                }
              }
            }
            .el-form-item__label {
              text-align: left;
              font-size: 14px;
              padding-block: 0;
              color: #7E8790;

              &::before {
                content: none;
              }
            }
          }
          .el-radio-group {
            .el-radio {
              height: auto;
              padding: 10px 35px;
              border-radius: 0;
              margin-right: 25px;
              margin-left: 0;
              .el-radio__input{
                display: none;
              }
              .el-radio__label {
                padding-left: 0;
              }
            }
          }
        }
        .content {
          .checkbox-ul {
            // width: 480px;
            white-space: pre-wrap;
            .el-radio-group {
              .el-radio {
                padding: 9px 40px;
                border: 1px solid #E5EAF0;
                border-radius: 4px;
                &.is-checked {
                  border-color: #0C7FF2;
                }
                .el-radio__input {
                  display: none;
                }
                .el-radio__label {
                  padding-left: 0;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
